<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>点评</title>
    <link rel="stylesheet" type="text/css" href="/static/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/api.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css" />
    <style>

        /* 头部样式 */
        #firstHeader {background-color: #FF8400;}
        .topbar {/*background: #FF8400;*/ height:50px; border-bottom: 1px solid #DDDFE3;}
        .topbar_title {display: inline-block;font-size: 20px; line-height: 50px;padding-left: 12px;}
        .hr01, .hr02 {height: 28px;}
        .headerico {padding: 11px 15px 11px 15px;}
        .headericohover {background: #DADDE0;}
        .fr{float: right;}
        .fl{float: left;}

        /*第一头部*/
        #logo {padding: 11px 0 0 10px;height: 28px;}
        #citylist {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px; color: #fff;}
        .citylistarrow {vertical-align: top; width: 20px; padding-top: 15px;}
        .search {height: 34px;line-height: 34px; padding-left: 10px; border-radius: 30px;  margin-top: 8px; position: absolute; left: 20px; right: 60px;font-size: 14px;}
        .search img {vertical-align: top; width: 20px; padding-top: 7px;padding-right: 10px;}
        .firstSearch {left: 90px;right: 60px;background-color: #FA6604;color: #FDC29B;}

        /* 第二头部 */
        #topbar_refresh {width: 40px;padding:5px 10px;}
        .whitebar {background-color: #fcfcfc;}
        #whitecity {height: 50px; line-height: 50px;padding-left: 15px; font-size: 18px;color: #FF8400;}
        .secCitylistarrow {vertical-align: top; width: 15px; padding-top: 18px;padding-left: 5px;}
        .secSearch {left: 90px;right: 15px;background-color: #E8E8E8;color: #999;}

        /* 第三头部 */
        .swipepic {padding: 5px 15px 2px 15px;height: 23px;}
        .swipe div {font-size: 12px; text-align: center;color: #999;}
        .thrSearch {left: 15px;right: 60px;background-color: #E8E8E8;color: #999;}

        .bubble{
            margin-right:10px;
            margin-bottom:5px;
            border: 2px solid orange;
            border-radius:8px;
            padding:4px 8px 4px 8px;
        }
        /* 头部切换样式 */
        .titlebar {display: none;}
        .activebar {display: block;}

        /* 底部切换按钮样式 */
        ul {display: -webkit-box; display: -webkit-flex; display: flex; }
        #footer {height: 61px; line-height: 60px; background-color: #FAFAFA;border-top: 1px solid #FAFAFA; }
        #footer li{-webkit-box-flex: 1; -webkit-flex: 1; flex:1; height: 60px;}

        /* 选项卡样式 */
        .scrollbar {display: -webkit-box;display: -webkit-flex; text-align: center; height: 40px; line-height: 40px;background: #EBECF0;font-size: 12px;position: relative;}
        .col1 {-webkit-box-flex:1;-webkit-flex: 1;flex:1;color: #909090;}
        .indexbar {position: absolute;/*background: #0fc;*/width: 50%;height: 5px;left: 0px;bottom: 0px;-webkit-transition: 300ms;}
        .redbox {background: #DB4646;width: 40px;height: 5px;position: relative;left: auto;right: auto; margin-left: auto; margin-right: auto;}

        /********************/
        /* 底部按钮原始样式 */
        /********************/
        .bbtn01 {background: url(./image/main_index_home_normal.png) no-repeat center 4px; }
        .bbtn02 {background: url(./image/main_index_tuan_normal.png) no-repeat center 4px; }
        .bbtn03 {background: url(./image/main_index_search_normal.png) no-repeat center 4px; }
        .bbtn04 {background: url(./image/main_index_my_normal.png) no-repeat center 4px; }
        .bottom_btn {width: 99%; height: 43px;padding-top: 18px;background-position-y: 4px; background-size: 30px;  font-size: 12px; color: #A5A5A5;}

        /* 底部按钮激活样式 */
        .activebtn0 {background: url(./image/main_index_home_pressed.png) no-repeat center 4px; }
        .activebtn1 {background: url(./image/main_index_tuan_pressed.png) no-repeat center 4px; }
        .activebtn2 {background: url(./image/main_index_search_pressed.png) no-repeat center 4px; }
        .activebtn3 {background: url(./image/main_index_my_pressed.png) no-repeat center 4px; }
        .activebtn {color:#FF7419; background-size: 30px; }
        .bottomhover {background-color: #46494B;}

        /* 本地刷新图标 */
        #localrefresh {display:none;float: right; width: 40px; padding: 5px 10px;}

        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            color: #E1E1E1;
        }
        input:-moz-placeholder, textarea:-moz-placeholder {
            color: #E1E1E1;
        }
        input::-moz-placeholder, textarea::-moz-placeholder {
            color: #E1E1E1;
        }
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            color: #E1E1E1;
        }

        .h80 {height: 80px;}
        .h40 {height: 40px;}
        .h20 {height: 20px;}
        .h10 {height: 10px;background: #f0f0f0;}
        .h1 {height: 1px;margin-left: 15px;background: #f0f0f0;}
        .fr {float: right;}
        .fl {float: left;}
        .hightitem {background-color: #fff;}

        /* 抢购样式 */
        .snapup {height: 80px;}
        .snapup .infologo {height: 60px; margin: 10px;}
        .snapup .shelf2 {display: table;height: inherit;margin-left: 10px;}
        .snapup .shelfcell {display: table-cell;vertical-align: middle;}
        .snapup .shelfcell .title {margin-bottom: 10px;}
        .snapup .arrow {width: 20px; padding-top: 30px;padding-right: 10px;}

        /* 2X2样式 */
        .row {display: -webkit-box;display: -webkit-flex;}
        .col {-webkit-box-flex:1; -webkit-flex:1; flex:1;position: relative;}
        .col img {position: absolute; right: 0; width: 80px; top: 0;}
        .col .matrixcell {display: table-cell;vertical-align: middle; padding-left: 10px;}
        .col .matrixcell .title {margin-bottom: 10px;}
        .matrix {display: table;height: inherit;}

        /* 猜你喜欢 */
        .guesstitle {height: auto;line-height: 20px;padding-left: 10px;vertical-align: top; font-size: 12px;color: #999;}
        .guesstitle img {height: 15px;padding-top: 12px; padding-left: 10px;}
        .home-tuan-list .item {position: relative; display: block; padding-left: 10px; border-bottom: 1px solid #e0e0e0;}
        .home-tuan-list .cnt {padding: 7px 10px 10px 0; display: box; display: -webkit-box; min-height: 78px;  background-size: auto 1px; }
        .home-tuan-list .pic {margin-right: 10px; background: center; }
        .home-tuan-list img {width: 90px; height: 66px; margin-top: 7px; margin-bottom: 5px; border-radius: 3px; }
        .home-tuan-list .wrap {-webkit-box-flex: 1; }
        .home-tuan-list .wrap2 {display: table; height: 88px; width: 100%; }
        .home-tuan-list .content {-webkit-box-flex: 1; box-flex: 1; display: table-cell; vertical-align: middle; }
        .home-tuan-list .shopname {color: #333; /*line-height: 16px;*/ font-size: 17px; max-width: 15em; white-space: nowrap; word-wrap: normal; text-overflow: ellipsis; overflow: hidden; min-height: 10px; padding-bottom: 2px; padding-top: 3px; display: inline-block;}
        .home-tuan-list .title {color: #666; line-height: 16px; font-size: 13px; max-height: 30px; overflow: hidden; padding-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .home-tuan-list .hot-title {margin-bottom: 8px; }
        .home-tuan-list .hot-subtitle {margin-bottom: 9px; }
        .home-tuan-list .info {margin-top: 9px; /*margin-bottom: 11px;*/ color: #666; font-size: 12px; position: relative; line-height: 15px; display: box; display: -webkit-box; height: 15px; }
        .home-tuan-list .symbol {font-size: 14px; color: #f60; display: block; margin-top: 1px; }
        .home-tuan-list .price {color: #f60; font-size: 20px; line-height: 15px; margin-right: 5px; margin-top: 1px; }
        .home-tuan-list .o-price {color: #999; margin-top: 5px; line-height: 10px; }
        .home-tuan-list .sale {color: #f63; border: solid 1px #ff916e; padding: 3px 2px 2px; font-size: 10px; border-radius: 2px; -webkit-border-radius: 2px; margin-left: 5px; line-height: 10px; height: 10px; }
        .home-tuan-list .distance {-webkit-box-flex: 1; box-flex: 1; -ms-box-flex: 1; -ms-flex: 1; text-align: right; line-height: 10px; margin-top: 5px; color: #999; float: right;font-size: 12px;}
        .home-tuan-list .price, .index-rec .home-tuan-list .o-price, .index-rec .home-tuan-list .distance, .index-rec .home-tuan-list .sale {display: block; line-height: 15px; font-size: 12px; }
        .Fix:after {display: block; content: ''; height: 0; clear: both; }

        /* 3. */
        .section03 .col img {width: 60px; top: 10px;}
        .section03 .title01 .title{color: #965037;}
        .section03 .title02 .title{color: #ffa001;}
        .section03 .title03 .title{color: #ff558c;}
        .section03 .title04 .title{color: #19b4ff;}
        .section03 .matrixcell .info {color: #666;}

        /* 2. */
        .section02 .shelfcell .title span{color: #ff6633;}
        .section02 .shelfcell .subtitel {color: #666;font-size: 14px;}
        .swiper-container {background-color: #fff;}

        /* 1. */
        .section01 .row {margin-top: 10px;}
        .section01 .col {text-align: center;}
        .section01 .col img {position: relative;width: 60%; }
        .section01 .col div {font-size: 13px;margin-top: 5px; }

        .presshover {background-color: #FAFAFA;}
        .brb {border-bottom: 1px solid #e0e0e0;border-right: 1px solid #e0e0e0;}
        .bb {border-bottom: 1px solid #e0e0e0;}
        .br {border-right: 1px solid #e0e0e0;}




        .swipe {
            overflow: hidden;
            visibility: hidden;
            position: relative;
            background: #fff;
            padding-bottom: 10px;
        }
        .swipe-wrap {
            overflow: hidden;
            position: relative;
        }
        .swipe-wrap .swipe-box {
            float: left;
            width: 100%;
            position: relative;
        }

        .sliderow {text-align: center;width: 100%;display: block;}
        /*.slidepanel .sliderow {margin-top: 10px;}*/
        .sliderow .slidecol {float:left;width: 25%;}
        .sliderow .slidecol img {width: 60%;margin-top: 10px;}
        .sliderow .slidecol div {font-size: 13px; margin-top: 5px;}


    </style>
</head>
<body>
<div id="wrap">

    <div id="firstHeader" class="titlebar activebar">
        <div class="topbar">
            <div class="citylist fl" id="citylist" tapmode="">上海<img src="./image/title_home_arrow_down_normal.png" alt="" class="citylistarrow"></div>
            <input class="search firstSearch" type="text" placeHolder="输入门店名搜索" name="keyword" id="keyword" style="width:250px;outline-width:0px;"/>
            <input type="hidden" id="longitude" value="" name="longitude"/>
            <input type="hidden" id="latitude" value="" name="latitude"/>
            <span id="rightTitle" style="font-size:16px;color:white;float:right;padding-top:12px;">登录</span>
        </div>
    </div>


    <div id="main" style="padding:0px;width:100%;height:100%;border:0px;">
        <!-- 1. 头部swipe -->
        <div id='slider' class='swipe'>
            <div class='swipe-wrap'>
                <div class="swipe-box">
                    <div class="sliderow" id="slideRow1">
                    </div>
                    <div class="sliderow" id="slideRow2">
                    </div>
                </div>
            </div>
        </div>

        <div class="guesstitle" id="guess">猜你喜欢<img src="/static/image/home_competitive_icon.png" alt=""></div>
        <div class="home-tuan-list" id="tuanList">

        </div>

        <div class="guesstitle" id="searchTitle" style="font-size:14px;">
            <p id="resTitle" >搜索结果</p>
            <div id="extraPadding" style="display:none;">
                <p>分类过滤</p>
                <div id="categoryFilter" style="margin-bottom:10px;"></div>
                <p>排序规则</p>
                <div id="priceFilter" style="margin-bottom:10px;"></div>
                <p>标签筛选</p>
                <div id="tagsFilter" style="margin-bottom:10px;"></div>
            </div>
        </div>
        <div class="home-tuan-list" id="searchList">

        </div>
    </div>

    <div id="footer">
        <ul>
            <li tapmode="activebtn0 activebtn">
                <a class="bottom_btn bbtn01 weixin activebtn activebtn0" href="/static/index.html">首页</a>
            </li>

            <li tapmode="activebtn1 activebtn">
                <a class="bottom_btn bbtn02 communicate">团购</a>
            </li>

            <li tapmode="activebtn2 activebtn">
                <a class="bottom_btn bbtn03 discover">发现</a>
            </li>

            <li tapmode="activebtn3 activebtn">
                <a class="bottom_btn bbtn04 home">我的</a>
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/script/api.js"></script>
<script type="text/javascript" src="/static/script/swipe.js"></script>
<script type="text/javascript" src="/static/script/jquery.min.js"></script>
<script type="text/javascript" src="/static/script/bootstrap.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FqB15cbgf1pzWzum5ajGpTrcfr7b3b90"></script>

<script type="text/javascript">

    var g_orderby = null;
    var g_categoryFilter = null;
    var g_tagFilter = null;

    window.onload = function() {

        var slider =
                Swipe(document.getElementById('slider'), {
                    auto: 1000000,
                    continuous: true,
                    callback: function(pos) {
                    }
                });
    }

    getFloat = function (number, n) {
        n = n ? parseInt(n) : 0;
        if (n <= 0) return Math.round(number);
        number = Math.round(number * Math.pow(10, n)) / Math.pow(10, n);
        return number;
    };

    jQuery(document).ready(function() {
        var g_currentUser = null;
        $("#searchTitle").hide();

        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var longitude = r.point.lng;
                var latitude = r.point.lat;
                $("#longitude").val(longitude);
                $("#latitude").val(latitude);

                $.ajax({
                    type : "GET",
                    url : "/shop/recommend?longitude="+longitude+"&latitude="+latitude,
                    success : function(data){
                        if(data.status == 'success'){
                            var dataList = data.data;
                            for(var i = 0; i < dataList.length; i++){
                                var distance = dataList[i].distance;
                                var distanceStr = "0m";
                                if(distance >= 1000){
                                    distanceStr = getFloat(distance / 1000,1) + " km";
                                }else{
                                    distanceStr = distance + " m";
                                }
                                var content = $('<a href="" class="item Fix hightitem">'+
                                        '<div class="cnt">'+
                                        '<img class="pic" src="'+dataList[i].iconUrl+'"/>'+
                                        '<div class="wrap">'+
                                        '<div class="wrap2">'+
                                        '<div class="content">'+
                                        '<div class="shopname">'+dataList[i].name+'</div><span class="distance">'+distanceStr+'</span>'+
                                        '<div class="title">'+dataList[i].tags+'</div>'+
                                        '<div class="info">'+
                                        '<span class="symbol">¥</span>'+
                                        '<span class="price">'+dataList[i].pricePerMan+'</span></div> </div> </div> </div> </div></a>');
                                $("#tuanList").append(content);
                            }
                        }else{
                            alert("获取门店信息失败，原因为"+data.data.errMsg);
                        }
                    },
                    error : function(data){
                        alert("获取门店信息失败，原因为"+data.responseText);
                    }
                });
            }
            else {
                alert('failed'+this.getStatus());
            }
        },{enableHighAccuracy: true});



        //获取当前用户的信息
        $.ajax({
            type:"POST",
            contentType:"application/json;charset=utf-8",
            url:"/user/getcurrentuser",
            success:function(data){
                  if(data.status == "success"){
                      if(data.data == null){
                          g_currentUser = null;
                      }else{
                          g_currentUser = data.data;
                      }
                      if(g_currentUser == null){
                          $("#rightTitle").text("登录");
                      }else{
                          $("#rightTitle").text("注销");
                      }
                  }else{
                      alert("请求失败,原因为"+data.data.errMsg);
                  }
            },
            error:function(data){
                alert("网络请求失败，原因为"+data.responseText);
            }
        });
        $.ajax({
            type : "GET",
            url : "/category/list",
            success : function(data){
                if(data.status == 'success'){
                    var dataList = data.data;
                    for(var i = 0; i < dataList.length; i++){
                        var content = $('<div class="slidecol"><img src="'+dataList[i].iconUrl+'" alt=""><div class="">'+dataList[i].name+'</div></div>');
                        if(i <= 3){
                            $("#slideRow1").append(content);
                        }else{
                            $("#slideRow2").append(content);
                        }
                    }
                }else{
                    alert("获取品类信息失败，原因为"+data.data.errMsg);
                }
            },
            error : function(data){
                alert("获取品类信息失败，原因为"+data.responseText);
            }
        });



        $("#rightTitle").on("click",function(){
            if(g_currentUser == null){
                window.location.href="/static/login.html";
            }else{
                $.ajax({
                    type:"POST",
                    contentType:"application/json;charset=utf-8",
                    url:"/user/logout",
                    success:function(data){
                        if(data.status == "success"){
                            window.location.href="/static/index.html";
                        }else{
                            alert("请求失败,原因为"+data.data.errMsg);
                        }
                    },
                    error:function(data){
                        alert("网络请求失败，原因为"+data.responseText);
                    }
                });
            }
            return false;
        });


        function searchMethod(){

            var orderby = "";
            var categoryFilter = "";
            var tagFilter = "";

            var keyword = $("#keyword").val();
            var longitude = $("#longitude").val();
            var latitude = $("#latitude").val();
            if($("#keyword").val() == ""){
                alert("关键字不能为空");
                return false;
            }
            if(longitude== "" || latitude == "" ){
                alert("地址位置信息还未获取到，请等待");
                return false;
            }
            if(g_orderby == null){
                orderby = "";
            }else{
                orderby = "&orderby="+g_orderby;
            }

            if(g_categoryFilter == null){
                categoryFilter = "";
            }else{
                categoryFilter = "&categoryId="+g_categoryFilter;
            }
            if(g_tagFilter == null){
                tagFilter = "";
            }else{
                tagFilter = "&tags="+g_tagFilter;
            }
            $.ajax({
                type : "POST",
                contentType : "application/json; charset=utf-8",
                url : "/shop/search?keyword="+keyword+"&longitude="+longitude+"&latitude="+latitude+orderby+categoryFilter+tagFilter,
                success : function(data){
                    if(data.status == 'success'){
                        $("#guess").hide();
                        $("#tuanList").hide();
                        $("#searchTitle").show();
                        $("#searchList").show();
                        $("#searchList").empty();
                        $("#slider").hide();
                        var dataList = data.data.shop;
                        var categoryList = data.data.category;
                        var tagsList = data.data.tags;
                        for(var i = 0; i < dataList.length; i++){
                            var distance = dataList[i].distance;
                            var distanceStr = "";
                            if(distance >= 1000){
                                distanceStr = getFloat(distance / 1000,1) + " km";
                            }else{
                                distanceStr = distance + " m";
                            }
                            var content = $('<a href="" class="item Fix hightitem">'+
                                    '<div class="cnt">'+
                                    '<img class="pic" src="'+dataList[i].iconUrl+'"/>'+
                                    '<div class="wrap">'+
                                    '<div class="wrap2">'+
                                    '<div class="content">'+
                                    '<div class="shopname">'+dataList[i].name+'</div><span class="distance">'+distanceStr+'</span>'+
                                    '<div class="title">'+dataList[i].tags+'</div>'+
                                    '<div class="info">'+
                                    '<span class="symbol">¥</span>'+
                                    '<span class="price">'+dataList[i].pricePerMan+'</span></div> </div> </div> </div> </div></a>');
                            $("#searchList").append(content);
                        }
                        $("#categoryFilter").empty();
                        var categoryTag = $("<span class='bubble' data-id='"+0+"' id='category"+0+"'>全部</span>");
                        $("#categoryFilter").append(categoryTag);
                        for(var i = 0; i < categoryList.length; i++){
                            var categoryTag = $("<span class='bubble' data-id='"+categoryList[i].id+"' id='category"+categoryList[i].id+"'>"+categoryList[i].name+"</span>");
                            $("#categoryFilter").append(categoryTag);
                        }


                        $("span[id^='category']").on('click',function(){
                            var id = $(this).data("id");
                            if(id == 0){
                                g_categoryFilter = null;
                            }else{
                                g_categoryFilter = id;
                            }
                            searchMethod();
                        });

                        $("#priceFilter").empty();
                        $("#priceFilter").append($('<span class="bubble" id="defaultOrder">默认排序</span>'));
                        $("#priceFilter").append($('<span class="bubble" id="lowPriceOrder">低价排序</span>'));

                        $("#defaultOrder").on('click',function(){
                            g_orderby=null;
                            searchMethod();
                        });
                        $("#lowPriceOrder").on('click',function(){
                            g_orderby=1;
                            searchMethod();
                        });

                        $("#tagsFilter").empty();
                        var tagTag = $("<span class='bubble' data-id='' id='tags'>全部</span>");
                        $("#tagsFilter").append(tagTag);
                        for(var i = 0; i < tagsList.length; i++){
                            var tagTag = $("<span class='bubble' data-id='"+tagsList[i].tags+"' id='tags"+tagsList[i].tags+"'>"+tagsList[i].tags+"("+tagsList[i].num+")</span>");
                            $("#tagsFilter").append(tagTag);
                        }
                        $("span[id^='tags']").on('click',function(){
                            var id = $(this).data("id");
                            if(id == ''){
                                g_tagFilter = null;
                            }else{
                                g_tagFilter = id;
                            }
                            searchMethod();
                        });
                    }else{
                        alert("搜索失败，原因为"+data.data.errMsg);
                    }
                },
                error : function(data){
                    alert("搜索失败，原因为"+data.responseText);
                }
            });
        }

        $('#keyword').on('keypress',function(event){
            if(event.keyCode == 13) {
                searchMethod();
            }
        });

        $("#resTitle").on("click",function(){
            $("#extraPadding").toggle(500);
        });

    });
</script>
</html>